/*
*******************************************************************************************************
# リスト検索画面共通スタイル - compiled from search_list.scss
*******************************************************************************************************
*/

// リスト検索画面
//
// #### export to search_list.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 9.0

// /* --------------------------------------------------
//		import core
// -------------------------------------------------- */
// compassのコア機能
@import "core";

// タブまわり→地域検索など
//
// .mod_box_head_search_list.box_head_search_area - sample
//
// Markup:
// <div class="mod_box_head_search_list box_head_search_area">
// <div class="box_ttl_page">
// <h1 class="mod_ttl_page"><strong>神奈川県</strong>のアパマンショップを地域から探す</h1>
// <p class="lead">神奈川県は、関東地方の南西部に位置する県で、元の相模国全域と武蔵国の一部に当たる。</p>
// </div>
// <ul id="tabSearch" style="margin-bottom: 85px;">
// <li class="left active"><a href="#contentTabArea" id="tabArea">地域から探す</a></li>
// <li class="right"><a href="#contentTabStation" class="mod_btn_over" id="tabStation">路線から探す</a></li>
// <!-- /#tabSearch --></ul>
// <span class="obj_bear bear_body_area bg_png"></span>
// <span class="obj_bear bear_hand_left bg_png"></span>
// <p class="btn_back"><a href="#dummy" class="mod_btn_back mod_btn_over">全国へ戻る</a></p>
// <!-- /.mod_box_head_search_list --></div>
//
// Styleguide 9.1

// タイトルまわり：タブなし→町名を選ぶなど
//
// .mod_box_head_search_list - sample
//
// Markup:
// <div class="mod_box_head_search_list box_head_search_town">
// <h1 class="mod_ttl_page">町名を選ぶ</h1>
// <h2 class="ttl_lead"><strong>東京都</strong>の賃貸物件を探す</h2>
// <p class="btn_back"><a href="#dummy" class="mod_btn_back mod_btn_over">戻る</a></p>
// </div>
//
// Styleguide 9.2

/* ------------------------------------
	* mod_box_head_search_list
* ------------------------------------ */
.mod_box_head_search_list {
	@include min-height(113px);
	margin-bottom: -30px;
	position: relative;

	.mod_ttl_page, .ttl_lead {
		strong {
			color: $textColorPink;
		}
	}

	.ttl_lead {
		margin-top: 10px;
		font-size: 18px;
		font-weight: bold;
	}

	#tabSearch {
		margin-top: 30px;
		position: relative;
		z-index: 2;
		height: 80px;

		li {
			position: absolute;
			top: 0px;

			&.active {
				top: 0px;
			}
			&.left {
				left: 0px;
			}
			&.right {
				right: 0px;
			}
		}

		a {
			display: block;
			width: 380px;
			height: 66px;
			background-repeat: no-repeat;
			background-position: 0px 0px;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
			outline: none;
		}

		#tabArea {
			background-image: url(/shared/images/search_list/tab_search_area.png);
		}
		#tabStation {
			background-image: url(/shared/images/search_list/tab_search_station.png);
		}

		.active {
			a {
				height: 78px;
				cursor: default;
			}

			#tabArea {
				background-image: url(/shared/images/search_list/tab_search_area_active.png);
			}
			#tabStation {
				background-image: url(/shared/images/search_list/tab_search_station_active.png);
			}
		}
	}

	.obj_bear {
		display: block;
		position: absolute;
		z-index: 3;
	}
	.bear_body_area {
		left: 333px;
		bottom: -76px;
		width: 243px;
		height: 155px;
		background: url(/shared/images/search_list/bear_body_area.png) no-repeat 0px 0px;
	}
	.bear_body_station {
		left: auto;
		right: 317px;
		bottom: -80px;
		width: 251px;
		height: 174px;
		background: url(/shared/images/search_list/bear_body_station.png) no-repeat 0px 0px;
	}

	.btn_back {
		position: absolute;
		right: 0px;
		top: 0px;
	}
}

/* ------------------------------------
	* 地域・路線から探す
* ------------------------------------ */
.box_head_search_area {
	position: relative;
	z-index: 1;

	.box_ttl_page {
		position: relative;
		z-index: 5;
		margin-left: 10px;
		padding-right: 130px;
		padding-left: 80px;
		@include min-height(75px);
		background: url(/shared/images/search_list/icn_ttl_area.png) no-repeat 0px 6px;

		.lead {
			margin-top: 8px;
		}
	}
}

#contentTabArea {
	position: relative;
}

/* ------------------------------------
	* 町名を選ぶ
* ------------------------------------ */
.box_head_search_town {
	background: url(/shared/images/search_list/bg_bear_town.png) no-repeat 228px 0px;
}

/* ------------------------------------
	* 希望条件
* ------------------------------------ */
.box_head_search_hope {
	background: url(/shared/images/search_list/bg_bear_hope.png) no-repeat 268px 0px;
}


// リスト部分：チェックボックスあり→地域検索など
//
// .mod_box_search_list - sample
//
// Markup:
// <div class="mod_box_search_list">
// <section class="mod_box_section_bdt">
// <h3 class="ttl_search">市区町村で絞り込む</h3>
// <div>
// <section class="box_category">
// <h4 class="mod_check mod_ttl mod_ttl_khaki mod_ttl_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy">東京都&nbsp;23区</a></label></h4>
// <ul class="list_search">
// <li class="mod_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">千代田区</span><span class="count">8,340</span></a></label></li>
// <li class="mod_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">千代田区千代田区千代田区千代田区千代田区</span><span class="count">88,340</span></a></label></li>
// <li class="mod_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">千代田区千代田区</span><span class="count">340</span></a></label></li>
// <li class="mod_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">千代田区</span><span class="count">88,340</span></a></label></li>
// <li class="mod_check"><label><input name="" type="checkbox" id="" value="" /><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">千代田区</span><span class="count">8,340</span></a></label></li>
// </ul>
// </section>
// </div>
// </section>
// </div>
//
// Styleguide 9.3

/* ------------------------------------
	* 路線から探すのタブ
* ------------------------------------ */
#contentTabStation {
	display: none;

	.box_station {
		padding-bottom: 30px;
		border-bottom: 1px solid $borderColorGray;

		strong {
			color: $textColorPink
		}

		.list_search {
			li {
				width: 465px;

				@include hack(6) {
					width: 461px;
				}
			}

			.name {
				width: 380px;
			}
		}
	}

	.list_line {
		margin-top: 34px;
		margin-right: -10px;
		margin-bottom: -40px;
		position: relative;
		@include clearfix;

		li {
			margin-right: 10px;
			float: left;
			width: 160px;
		}

		a {
			background-image: url(/shared/images/icon/arr_btn_khaki.png);
			background-repeat: no-repeat;
			background-position: 10px 12px;
		}
	}

	.box_line {
		margin-top: 30px;
	}

	.ttl_line {
		margin-bottom: 8px;
		color: $textColorKhaki;
		font-size: 20px;
		font-weight: bold;
	}
}

/* ------------------------------------
	* mod_box_search_list
* ------------------------------------ */
.mod_box_search_list {
	.mod_box_section_bdt {
		padding-bottom: 60px;
	}

	.ttl_search {
		margin-bottom: 16px;
		font-size: 20px;
		font-weight: bold;
	}

	.lead_search {
		position: absolute;
		right: 20px;
		top: 34px;
	}

	.box_category {
		position: relative;
		z-index: 5;
		margin-top: 60px;

		&:first-child {
			margin-top: 0;
		}
	}

	.list_search {
		margin-top: -6px;
		margin-right: -30px;
		width: 990px;
		@include clearfix;

		li {
			margin-top: 10px;
			margin-right: 30px;
			@include border-radius($radiusBtn);
			position: relative;
			float: left;
			width: 300px;
			background-color: $bgColorGray;

			&.mod_disabled {
				label, span, div {
					@include opacity(0.6);
					cursor: default;

					&:hover {
						@include opacity(0.6);
					}
				}
			}

			@include hack(6) {
				width: 296px;
			}
		}

		label {
			padding: 0px 10px;
			margin-right: -10px;
			vertical-align: top;
			
			.mod_checkbox {
				top: 0;
			}
		}

		.mod_btn {
			padding-top: 12px;
			padding-bottom: 14px;
			width: 254px;
			color: $textColor;
			text-align: left;
			@include clearfix;
		}

		.name {
			float: left;
			width: 170px;
		}

		.count {
			float: right;
			color: $textColorUsuBlue;
			font-size: 12px;
			line-height: $lineHeightL;
		}

		@include hack(6) {
			input {
				vertical-align: top;
			}
		}
		@include hack(7) {
			input {
				vertical-align: top;
			}
		}
	}
}


// リスト部分：チェックボックスなし→路線検索など
//
// .mod_box_search_list.mod_box_search_list_nocheck - sample
//
// Markup:
// <div class="mod_box_search_list mod_box_search_list_nocheck">
// <section class="mod_box_section_bdt">
// <h3 class="ttl_search">路線を選択</h3>
// <div>
// <section class="box_category" id="JRLine">
// <h4 class="mod_ttl mod_ttl_khaki">JR</h4>
// <ul class="list_search">
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン湘南新宿ライン湘南新宿ライン</span><span class="count">88,340</span></a></li>
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン</span><span class="count">8,340</span></a></li>
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン湘南新宿ライン</span><span class="count">340</span></a></li>
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン</span><span class="count">88,340</span></a></li>
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン湘南新宿ライン</span><span class="count">40</span></a></li>
// <li class="mod_check"><a href="#dummy" class="mod_btn mod_btn_blue"><span class="name">湘南新宿ライン湘南新宿ライン湘南新宿ライン</span><span class="count">88,340</span></a></li>
// </ul>
// </section>
// </div>
// </section>
// </div>
//
// Styleguide 9.4

/* ------------------------------------
	* mod_box_search_list_nocheck
* ------------------------------------ */
.mod_box_search_list_nocheck {
	.list_search {
		li {
			background: none;
		}

		.mod_btn {
			width: 100%;
		}

		.name {
			width: 220px;
		}
	}
}

